import '../assets/bottom.css'
import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons'
import { useState, useEffect, useContext } from 'react'
import GlobalContext from './GlobalContext'

const { setDatas } = window.api.bottom

function Bottom() {
  const { t } = useContext(GlobalContext)
  const [netInf, setNetInf] = useState({})
  const [time, setRTime] = useState({})

  useEffect(() => {
    setDatas(setNetInf, setRTime)
  }, [])

  return (
    <div
      style={{
        width: '100%',
        paddingLeft: '10px',
        paddingRight: '10px'
      }}
    >
      <div className="bottom-container">
        <div className="bottom-item">
          <div className="item-title">
            {t('network')}
            <span
              className={netInf && netInf.status ? 'circle-green' : 'circle-red'}
            ></span>
          </div>
          <div className="item-val">
            <span className="item-val" style={{ marginRight: '10px' }}>
              <ArrowDownOutlined /> {netInf && netInf.downRate}{' '}
            </span>
            <span className="item-val">
              <ArrowUpOutlined /> {netInf && netInf.upRate}
            </span>
          </div>
        </div>
        <div className="bottom-item">
          <div className="item-title">{t('uptime')}</div>
          <div className="item-val">
            {time && time.days > 0 && (
              <span>
                {time.days}
                {time.days > 1 ? t('days') : t('day')},&nbsp;
              </span>
            )}
            <span>{time && time.hours}</span>
            <span>:{time && time.minutes}</span>
            <span>:{time && time.seconds}</span>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Bottom
